<template>
  <!-- 进步数据页面 -->
  <div class="box">
    <div class="progress_top">
      <van-row>
        <van-col
          span="8"
          :style="{fontSize:'16px'}"
          @click="time=true"
        >{{data_time}}
          <van-icon name="arrow-down" />
        </van-col>
        <van-col
          span="8"
          @click="show=true"
          :style="{fontSize:'16px'}"
        >全部
          <van-icon name="arrow-down" />
        </van-col>
        <van-col
          span="8"
          :style="{fontSize:'16px'}"
          @click="technology=true"
        >{{dept}}
          <van-icon name="arrow-down" />
        </van-col>
        <!-- 时间插件 -->
        <van-popup
          v-model="time"
          :safe-area-inset-bottom="true"
          :style="{width:'86%',fontSize:'14px',borderRadius:'10px'}"
          :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
        >
          <van-datetime-picker
            v-model="currentDate"
            :min-date="minDate"
            :max-date="maxDate"
            type="year-month"
            @confirm="getTime_month"
            @cancel="time=false"
          />

        </van-popup>
        <van-popup
          v-model="show"
          :safe-area-inset-bottom="true"
          :style="{ height:'85%', width:'54%',fontSize:'14px',borderRadius:'10px'}"
          :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
        >
          <van-radio-group v-model="radio">
            <van-cell-group :style="{textAlign:'left'}">
              <van-cell
                title="全部"
                clickable
                @click="show_event(0)"
              >
                <van-radio
                  slot="icon"
                  :name="0"
                  :style="{marginRight:'4vw'}"
                />
              </van-cell>
              <van-cell
                :title="it.name"
                clickable
                @click="show_event(it.id)"
                v-for="(it,j) in event"
                :key="j"
              >
                <van-radio
                  slot="icon"
                  :name="j+1"
                  :style="{marginRight:'4vw'}"
                />
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-popup>
        <van-popup
          v-model="technology"
          :safe-area-inset-bottom="true"
          :style="{width:'54%',fontSize:'14px',borderRadius:'10px'}"
          :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
        >
          <van-radio-group v-model="radio">
            <van-cell-group :style="{textAlign:'left'}">
              <van-cell
                :title="it.name"
                clickable
                @click="show_dept(it.dingding_id)"
                v-for="(it,i) in list"
                :key="i"
              >
                <van-radio
                  slot="icon"
                  :name="i"
                  :style="{marginRight:'4vw'}"
                />
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-popup>
      </van-row>
    </div>
    <div class="progress_centent clearfix">
      <div
        id="myChart"
        :style="{width: '100%', height: '280px',marginTop:'30px'}"
      ></div>
      <div style="border-top: 1px solid silver;">
        <p>数据统计</p>
        <dl class="left">
          <dt>姓名</dt>
          <dd
            v-for="(item,i) in arr"
            :key="i"
          >{{item.name}}</dd>
        </dl>
        <dl class="left">
          <dt>本月排名</dt>
          <dd
            v-for="(item,i) in arr"
            :key="i"
          >{{item.thisMonthRank}}</dd>
        </dl>
        <dl class="left">
          <dt>上月排名</dt>
          <dd
            v-for="(item,i) in arr"
            :key="i"
          >{{item.lastMonthRank}}</dd>
        </dl>
        <dl class="left">
          <dt>趋势</dt>
          <dd 
            v-for="(item,i) in arr"
            :key="i"
          >
            <span v-if='item.trend>=0'><img
                style="height:22px;width:18px;vertical-align: middle"
                src="@/static/img/向上.png"
              >{{item.trend}}</span>
            <span v-if='item.trend<0'><img
                style="height:22px;width:18px;vertical-align: middle"
                src="@/static/img/向下.png"
              >{{item.trend.toString().split('-')[1]}}</span>
          </dd>
        </dl>
      </div>
    </div>
    <van-overlay
      :show="isShowloading"
      @click="isShowloading = false"
    >
      <div
        class="wrapper"
        @click.stop
      >
        <van-loading
          vertical
          type="spinner"
          size="50"
        >数据加载中...</van-loading>
      </div>
    </van-overlay>
  </div>

</template>

<script type="text/javascript">
import {
  Icon,
  Popup,
  Row,
  Col,
  RadioGroup,
  Radio,
  Cell,
  CellGroup,
  DatetimePicker,
  Overlay,
  Loading
} from "vant";
export default {
  data() {
    return {
      radio: 0,
      show: false,
      isShowloading: false,
      technology: false,
      time: false,
      minDate: new Date(2018, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      data_time: "",
      arr: [],
      dept: "",
      list: [],
      event: [],
      dept_id: "",
      event_id: ""
    };
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [DatetimePicker.name]: DatetimePicker,
    [Loading.name]: Loading,
    [Overlay.name]: Overlay
  },
  created() {
    dd.biz.navigation.setTitle({
      title: "进步奖" //控制标题文本，空字符串表示显示默认文本
    });
  },
  mounted() {
    this.dataTime();
    this.getEvent();
  },
  methods: {
    // 事件筛选
    show_event(id) {
      this.event_id = id;
      this.getProgressAward(this.data_time, this.dept_id, id);
      this.show = false;
    },
    // 事件数据
    async getEvent() {
      let corpId = localStorage.getItem("custid");
      //  let corpId = this.$utils.getUrlKey("custid");
      const res = await this.$http.get(
        `yuepoints/Event?corpId=${corpId}&type=0`
      );
      this.event = res.data.data;
    },
    // 部门筛选
    show_dept(id) {
      this.dept_id = id;
      this.technology = false;
      this.getProgressAward(this.data_time, id, this.event_id);
    },
    // 当前时间
    dataTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let month;
      if (mm < 10) {
        month = "0" + mm;
      } else {
        month = mm;
      }
      let year = yy + "-" + month;
      this.data_time = year;
      this.getProgressAward(year);
    },
    // 选择时间
    getTime_month(time) {
      const d = new Date(time);
      let yy = d.getFullYear();
      let mm = this.p(d.getMonth() + 1);
      const resDate = yy + "-" + mm;
      this.data_time = resDate;
      this.time = false;
      this.getProgressAward(resDate, this.dept_id, this.event_id);
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    async getProgressAward(year, id, event) {
      this.isShowloading=true;
      if (id == undefined) {
        id = "";
      }
      if (event == undefined || event == 0) {
        event = "";
      }
      let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      let userId = localStorage.getItem("userId");
      const res = await this.$http
        .get(
          `yuepoints/getProgressAward?corpId=${corpId}&ddId=${userId}&date=${year}&depId=${id}&event=${event}`
        )
        .then(res => {
          const {
            data: { progressList, dept },
            errcode,
            errmsg
          } = res.data;
          if (errcode == "0000") {
            this.isShowloading=false;
            this.arr = progressList;
            this.dept = dept.office_id.key;
            this.list = dept.office_list;
            this.drawLine();
          } else if (errcode == "1005") {
            this.isShowloading=false;
            this.$toast(errmsg);
          }
        });
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      let arr_list = [];
      arr_list = this.arr;
      let data_name = [];
      let lastMonthRank = [];
      let thisMonthRank = [];
      for (let i = 0; i < arr_list.length; i++) {
        data_name.push(arr_list[i].name);
        lastMonthRank.push(arr_list[i].lastMonthRank);
        thisMonthRank.push(arr_list[i].thisMonthRank);
      }
      // console.log(data_name);
      // 绘制图表
      myChart.setOption({
        // legend: {},
        // tooltip: {},
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}"
        },

        grid: {
          top: 60,
          right: 70,
          bottom: 30,
          left: 60
        },
        legend: {
          top: 32,
          left: "center",
          data: ["上月排名", "本月排名"]
        },
        calculable: true,
        xAxis: {
          type: "category",
          data: data_name,
          axisLabel: {
            interval: 0,
            rotate: 30,
            margin: 10
          }
        },
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "上月排名",
            type: "bar",
            yAxisIndex: 0,
            type: "bar",
            data: lastMonthRank
          },
          {
            name: "本月排名",
            type: "bar",
            yAxisIndex: 0,
            type: "bar",
            data: thisMonthRank
          }
        ]
      });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 15px;
  padding-bottom: 50px;
   /deep/ .van-overlay {
    z-index: 2;
  }
  .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
  p,
  dl,
  dt,
  dd {
    margin: 0px;
    text-align: left;
  }
  dd{
    height: 22px;
  }
  p {
    font-weight: 700;
    padding-top: 15px;
  }
  dl {
    margin-right: 12vw;
    margin-top: 15px;
  }
  dt {
    font-weight: 700;
  }
  dl:last-child {
    margin-right: 0px;
  }
  .progress_top {
    height: 45px;
    line-height: 45px;
    background: #fff;
    // text-align: left;
    color: rgba(0, 114, 255, 0.88);
  }
  .progress_centent {
    margin: 10px 15px;
  }
  span {
    display: inline-block;
  }
  .left {
    float: left;
  }
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>
